import { createForm } from "@formily/core";
import { createSchemaField } from "@formily/react";
import {
  Form,
  FormItem,
  FormLayout,
  Input,
  Select,
  Password,
  Cascader,
  DatePicker,
  Submit,
  Space,
  FormGrid,
  Upload,
  ArrayItems,
  Editable,
  FormButtonGroup,
} from "@formily/antd-v5";
import { action } from "@formily/reactive";
import { Card, Button } from "antd";
import { UploadOutlined } from "@ant-design/icons";

const form = createForm({
  validateFirst: true,
});

const IDUpload = (props: any) => {
  return (
    <Upload
      {...props}
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      headers={{
        authorization: "authorization-text",
      }}
    >
      <Button icon={<UploadOutlined />}>上传复印件</Button>
    </Upload>
  );
};

const SchemaField = createSchemaField({
  components: {
    FormItem,
    FormGrid,
    FormLayout,
    Input,
    DatePicker,
    Cascader,
    Select,
    Password,
    IDUpload,
    Space,
    ArrayItems,
    Editable,
  },
  scope: {
    fetchAddress: (field: any) => {
      const transform = (data = {}) => {
        return Object.entries(data).reduce((buf, [key, value]) => {
          if (typeof value === "string")
            return buf.concat({
              label: value,
              value: key,
            });
          const { name, code, cities, districts } = value;
          const _cities = transform(cities);
          const _districts = transform(districts);
          return buf.concat({
            label: name,
            value: code,
            children: _cities.length
              ? _cities
              : _districts.length
              ? _districts
              : undefined,
          });
        }, []);
      };

      field.loading = true;
      fetch("//unpkg.com/china-location/dist/location.json")
        .then((res) => res.json())
        .then(
          action.bound((data) => {
            field.dataSource = transform(data);
            field.loading = false;
          })
        );
    },
  },
});

const schema = {
  type: "object",
  properties: {
    username: {
      type: "string",
      title: "用户名",
      required: true,
      "x-decorator": "FormItem",
      "x-component": "Input",
    },
    password: {
      type: "string",
      title: "密码",
      required: true,
      "x-decorator": "FormItem",
      "x-component": "Password",
      "x-component-props": {
        checkStrength: true,
      },
      "x-reactions": [
        {
          dependencies: [".confirm_password"],
          fulfill: {
            state: {
              selfErrors:
                '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
            },
          },
        },
      ],
    },
    confirm_password: {
      type: "string",
      title: "确认密码",
      required: true,
      "x-decorator": "FormItem",
      "x-component": "Password",
      "x-component-props": {
        checkStrength: true,
      },
      "x-reactions": [
        {
          dependencies: [".password"],
          fulfill: {
            state: {
              selfErrors:
                '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
            },
          },
        },
      ],
    },
    name: {
      type: "void",
      title: "姓名",
      "x-decorator": "FormItem",
      "x-decorator-props": {
        asterisk: true,
        feedbackLayout: "none",
      },
      "x-component": "FormGrid",
      properties: {
        firstName: {
          type: "string",
          required: true,
          "x-decorator": "FormItem",
          "x-component": "Input",
          "x-component-props": {
            placeholder: "姓",
          },
        },
        lastName: {
          type: "string",
          required: true,
          "x-decorator": "FormItem",
          "x-component": "Input",
          "x-component-props": {
            placeholder: "名",
          },
        },
      },
    },
    email: {
      type: "string",
      title: "邮箱",
      required: true,
      "x-decorator": "FormItem",
      "x-component": "Input",
      "x-validator": "email",
    },
    gender: {
      type: "string",
      title: "性别",
      enum: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 2,
        },
        {
          label: "第三性别",
          value: 3,
        },
      ],
      "x-decorator": "FormItem",
      "x-component": "Select",
    },
    birthday: {
      type: "string",
      required: true,
      title: "生日",
      "x-decorator": "FormItem",
      "x-component": "DatePicker",
    },
    address: {
      type: "string",
      required: true,
      title: "地址",
      "x-decorator": "FormItem",
      "x-component": "Cascader",
      "x-reactions": "{{fetchAddress}}",
    },
    idCard: {
      type: "string",
      required: true,
      title: "身份证复印件",
      "x-decorator": "FormItem",
      "x-component": "IDUpload",
    },
    contacts: {
      type: "array",
      required: true,
      title: "联系人信息",
      "x-decorator": "FormItem",
      "x-component": "ArrayItems",
      items: {
        type: "object",
        "x-component": "ArrayItems.Item",
        properties: {
          sort: {
            type: "void",
            "x-decorator": "FormItem",
            "x-component": "ArrayItems.SortHandle",
          },
          popover: {
            type: "void",
            title: "完善联系人信息",
            "x-decorator": "Editable.Popover",
            "x-component": "FormLayout",
            "x-component-props": {
              layout: "vertical",
            },
            "x-reactions": [
              {
                dependencies: [".popover.name"],
                fulfill: {
                  schema: {
                    title: "{{$deps[0]}}",
                  },
                },
              },
            ],
            properties: {
              name: {
                type: "string",
                title: "姓名",
                required: true,
                "x-decorator": "FormItem",
                "x-component": "Input",
                "x-component-props": {
                  style: {
                    width: 300,
                  },
                },
              },
              email: {
                type: "string",
                title: "邮箱",
                "x-decorator": "FormItem",
                "x-component": "Input",
                "x-validator": [{ required: true }, "email"],
                "x-component-props": {
                  style: {
                    width: 300,
                  },
                },
              },
              phone: {
                type: "string",
                title: "手机号",
                "x-decorator": "FormItem",
                "x-component": "Input",
                "x-validator": [{ required: true }, "phone"],
                "x-component-props": {
                  style: {
                    width: 300,
                  },
                },
              },
            },
          },
          remove: {
            type: "void",
            "x-decorator": "FormItem",
            "x-component": "ArrayItems.Remove",
          },
        },
      },
      properties: {
        addition: {
          type: "void",
          title: "新增联系人",
          "x-component": "ArrayItems.Addition",
        },
      },
    },
  },
};

export default () => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        background: "#eee",
        padding: "40px 0",
      }}
    >
      <Card title="新用户注册" style={{ width: 620 }}>
        <Form
          form={form}
          labelCol={5}
          wrapperCol={16}
          onAutoSubmit={console.log}
        >
          <SchemaField schema={schema} />
          <FormButtonGroup.FormItem>
            <Submit block size="large">
              注册
            </Submit>
          </FormButtonGroup.FormItem>
        </Form>
      </Card>
    </div>
  );
};
